
<style>
    .wrap{ border: 1px solid #e7e7eb; }
    .reply{ border-bottom: 1px solid #e7e7e7; height: 40px; line-height: 40px; }
    .reply li{ display: inline-block; padding-left: 20px; cursor: pointer; color: #b2b2b2; font-size: 14px; }
    .reply li:hover{ color: #222; }
    .btns{ display: table; width: 100%; padding: 20px; }
    .btns a{ display: table-cell; padding: 70px; text-align: center; width: 50%; border: 1px dashed #e7e7e7; color: #8d8d8d; font-size: 14px; }
    .reply .selected span{ color: #222; }
    .list{ padding: 20px; }
    .list li{ position: relative; }
    .list li .dal{ position: absolute; top: 0; right: 0; }
</style>

{include file="common/dialog/editor_dialog"}

<!--回复列表-->
<script type="text/x-template" id="material-list">

    <div class="wrap">

        <!-- 选择组件 -->
        <ul class="reply">
            <li class="tab_appmsg" @click="fnActive($event, 0)" :class="{selected:this.index==0}">
                <i class="icon_msg_sender"></i><span class="msg_tab_title">图文消息</span>
            </li>

            <li class="tab_img" @click="fnActive($event, 1)" :class="{selected:this.index==1}">
                <i class="icon_msg_sender"></i><span class="msg_tab_title">图片</span>
            </li>

            <li class="tab_audio" @click="fnActive($event, 2)" :class="{selected:this.index==2}"
                ref="audio">
                <i class="icon_msg_sender"></i><span class="msg_tab_title">语音</span>
            </li>

            <li class="tab_video" @click="fnActive($event, 3)" :class="{selected:this.index==3}"
                ref="video">
                <i class="icon_msg_sender"></i><span class="msg_tab_title">视频</span>
            </li>
        </ul>


        <!-- 显示素材列表 -->
        <ul class="list">

            <li v-if="data.type == 'img' && index == 1">
                <img :src="data.img.path" alt="" height="200">
                <a href="javascript:;" @click="fndel" class="dal icon14_common del_gray Js_reply_del">删除</a>
            </li>

            <li v-else-if="data.type == 'voice' && index == 2">
                <div class="audio_title" v-text="data.voice.title"></div>
                <audio :src="data.voice.filePath" controls="controls"></audio>
                <a href="javascript:;" @click="fndel" class="dal icon14_common del_gray Js_reply_del">删除</a>
            </li>

            <li v-else-if="data.type == 'video' && index == 3">
                <div class="richvideo Js_videomsg" style="display: inline-block;">
                    <div class="richvideo_content" style="z-index: 0">
                        <h4 class="title" v-text="data.video.title"></h4>
                        <div class="video_info">
                            <em class="time"></em>
                            <em class="res"></em>
                        </div>
                        <div class="video_wrp Js_videoContent">
                            <div class="video_shot" style="height: auto">
                                <video style="height: 200px;" :src="data.video.filePath" preload="auto"
                                       controls="controls"></video>
                                <div class="loading_tips" style="display:none">
                                    <i class="icon32_loading dark"></i>
                                    <p>转码中</p>
                                </div>
                            </div>
                        </div>
                        <div class="video_desc">{{ data.video.remark }}</div>
                    </div>
                    <div class="richvideo_mask"></div>
                    <i class="icon_card_selected">已选择</i>
                    <div class="richvideo_tips">
                        <i class="icon_richvideo_error"></i>
                        <p>该素材没有标题，<a href="">马上编辑</a></p>
                    </div>
                </div>
                <a href="javascript:;" @click="fndel" class="dal icon14_common del_gray Js_reply_del">删除</a>
            </li>

            <li v-else-if="data.type == 'new' && index == 0 ">
                <div class="media_content Js_media_content" style="display: inline-block;">
                    <div class="appmsg single has_first_cover">
                        <div class="appmsg_content">
                            <div class="appmsg_info">
                                <em class="appmsg_date" v-text="data.new.created"></em>
                            </div>
                            <div class="appmsg_item">
                                <h4 class="appmsg_title js_title">
                                    <a href="" target="_blank" v-text="data.new.articles[0].title"></a>
                                </h4>
                                <div class="appmsg_thumb_wrp"
                                     :style="{'background-image':'url(${ctx}/file/'+ data.new.articles[0].thumb_image_path +')'}">
                                </div>
                                <p class="appmsg_desc" v-text="data.new.articles[0].digest"></p>
                                <a :href="'${ctx}/material/news/preview?id=' + data.new.id"
                                   class="edit_mask preview_mask js_preview">
                                    <div class="edit_mask_content">
                                        <p class="">预览文章</p>
                                    </div>
                                    <span class="vm_box"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" @click="fndel" class="dal icon14_common del_gray Js_reply_del">删除</a>
            </li>

            <li class="btns" v-else>
                <a href="javascript:;" class="add_gray_wrp jsMsgSenderPopBt" @click="open">
                    <i class="icon36_common add_gray"></i><br>
                    <strong>从素材库中选择 </strong>
                </a>

                <a :href="material[index].url" target="iframe-tab-content" class="add_gray_wrp">
                    <i class="icon36_common add_gray"></i><br>
                    <strong v-text="material[index].title"></strong>
                </a>
            </li>
        </ul>

        <media_modal v-if="isShowPupop" @close="closerPopup" @confirm="savePopup" :data-type="tabType"></media_modal>

    </div>
</script>

<script>

    Vue.component("material-list", {
        data: function () {
            return {
                index: 0,
                isShowPupop: false,
                tabType: 10,
                type: [10, 2, 3, 15],
                material: [
                    {title: "新建图文消息", url: "/material/news/editPage"},
                    {title: "长传图片", url: "/material/image"},
                    {title: "新建语音", url: "/material/voice/editPage"},
                    {title: "新建视频", url: "/material/video/editPage"}
                ],
                urls: {
                    10: '/material/news/', //图文
                    2: '/upload/resource/', //图片
                    3: '/material/voice/', //语音
                    15: '/material/video/' //视频
                },
                typeId: {
                    10: "newsId", //图文
                    2: "imageId", //图片
                    3: "voiceId", //语音
                    15: "videoId" //视频
                },
                types: {
                    10: "new", //图文
                    2: "img", //图片
                    3: "voice", //语音
                    15: "video" //视频
                },
                data: {
                    type: "",
                    new: {},
                    img: {},
                    voice: {},
                    video: {}
                }
            }
        },

        template: "#material-list",
        methods: {
            fnActive: function (e, num) {
                this.index = num;
            },
            open: function () {

                this.tabType = this.type[this.index];
                this.isShowPupop = true;

//                this.$emit("open", this.type[this.index]);
            },

            closerPopup: function () {

                this.isShowPupop = false;
            },
            savePopup: function (val, type) {
                this.fnAjax(this.urls[type], val, type)
            },
            fnAjax: function (_url, _val, _type) {
                var This = this;

                var id = this.typeId[_type];
                var type = this.types[_type];

                axios.get('${ctx}' + _url + 'get?id=' + _val).then(function (data) {
                    if (data.status === 200) {

                        This.data.type = type;

                        This.data[type] = data.data.data;

                        This.$emit("save", This.data, This.tabType);
                    }
                });

            },
            fndel: function (type) {
                this.data = {type: "", new: {}, img: {}, voice: {}, video: {}};
            }
        }

    })

</script>

